<template>
  <div class="page-wrap">
    <!-- 页面面包屑 -->
    <bread :curPath="{ toPath: '/product', name: '产品中心' }" />
    <div class="page-main">
      <div class="con-box">
        <div class="main-menu-box">
          <h2><i class="yicon"></i>产品中心</h2>
          <ul class="main-menu shadow-box">
            <li :class="activeCls" @click="$router.push('/product')"><a style="cursor:pointer">所有产品</a></li>
            <router-link tag="li" v-for="cate in categoryList" :key="cate.id" :to="'/product/' + cate.id"><a>{{cate.name}}</a></router-link>
          </ul>
        </div>
        <div class="main shadow-box">
            <h1><span>产品中心</span></h1>
            <div class="main-content">
                <ul class="pro-list clearfix" id="listProducts">
                    <!-- <li>
                      <div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img :src="'/images/product.jpg'" /></a></div>
                      <div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
                    </li> -->
                    <li v-for="product in products" :key="product.id" @click="detail(product.id)">
                      <div class="pic"><a><img :src="product.pic" /></a></div>
                      <div class="title"><a>{{ product.proName }}</a></div>
                    </li>
                </ul>
                <div class="page-box">
                  <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="pageData.curPage"
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="pageData.pageSize"
                    layout="total, prev, pager, next, jumper"
                    :total="pageData.total">
                  </el-pagination>
                </div>
                <div id="noData" style="display:none; font-size:20px; text-align:center; padding:80px;">~oops 未有相关数据! 请选择其他分类。 </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Bread } from './layout'
import { mapState } from 'vuex'
import api from '@/api'

export default {
  data() {
    return {
      pageData: {
        curPage: 1,
        pageSize: 6,
        total: 0
      },
      cateId: '', // 当前分类的id
      products: []
    }
  },
  mounted() {
    this.cateId = this.$route.params.id || ''
    this.loadPageData()
  },
  computed: {
    ...mapState(['categoryList']),
    activeCls() {
      if (this.cateId * 1 > 0) {
        return { active: false }
      }
      return { active: true }
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.loadPageData()
    },
    loadPageData() {
      let query = null
      if (this.cateId * 1 > 0) {
        query = { cateId: this.cateId }
      }
      api.productpagedata({
        pageIndex: this.pageData.curPage,
        pageSize: this.pageData.pageSize
      }, query).then(res => {
        if (res.data.errorCode === 0) {
          let resData = res.data.data
          this.products = resData.rows
          this.pageData.total = resData.count
        } else {
          this.$message({
            message: res.data.msg,
            type: 'warning'
          })
        }
      }).catch(err => {
        console.log(err)
      })
    },
    detail(id) {
      this.$router.push(`/prodetail/${id}`)
    }
  },
  watch: {
    '$route' (to, from) {
      this.cateId = to.params.id || ''
      this.pageData.pageIndex = 1
      this.loadPageData()
    }
  },
  components: {
    Bread
  }
}
</script>

<style lang="scss" scoped>

/*产品中心*/
.pro-list{ min-height: 540px;}
.pro-list li{ margin-bottom:20px; float:left; width: 33.33%; overflow:hidden; text-align:center; }
.pro-list li .pic{ text-align:center; }
.pro-list li .pic img{ width:250px; height:220px; display:block; margin: 0 auto; padding:4px; border:3px solid #ccc; }
.pro-list li .pic a:hover img{ border-color:#006835;  }
.pro-list li .title{ line-height:30px; font-size: 14px; }

/*分页样式*/
.page {	font-size: 0;}
.page a {
  display: inline-block;
  padding: 0 5px;
  font-size: 14px;
  margin: 0 2px;
  line-height: 22px;
  border: 1px solid #006835;
  border-radius: 2px;
}
.page a.cur, .page a:hover {
  background: #03b65f;
  color: #fff;
}
.page span {
  font-size: 14px;
  margin: 0 2px;
  line-height: 24px;
}
</style>
